<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建元素和添加元素</title>
		<style type="text/css">
			div	{
				margin: 10px 0px;
			}
			span{
				color: white;
				padding: 8px
			}
			.red{
				background-color: red;
			}
			.blue{
				background-color: blue;
			}
			.green{
				background-color: green;
			}
			.pink {
				background-color: pink;
			}
			.gray{
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<h3>prepend()方法前追加内容</h3>
		<h3>prependTo()方法前追加内容</h3>
		<h3>append()方法后追加内容</h3>
		<h3>appendTo()方法后追加内容</h3>
		
		<span class="red">男神</span>
		<span class="blue">偶像</span>
		<div class="green">
			<span >小鲜肉</span>
		</div> 
	</body>
	<!-- 
		创建元素和添加元素
			创建元素
				$("内容")
			添加元素
				1. 前追加子元素
					指定元素.prepend(内容)			在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jquery对象。
					$(内容).prependTo(指定元素);		把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jquery对象。
				
				2. 后追加子元素
					指定元素.append(内容)			在指定元素内部的最后面追加内容，内容可以是字符串、html元素或jquery对象。
					$(内容).appendTo(指定元素);		把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jquery对象。
					
				3. 前追加同级元素
					before()						在指定元素的前面追加内容
				4. 后追加同级元素
					after()							在指定元素的后面追加内容
					
				注：
					在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置；
					如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置
	 -->
	 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	 <script type="text/javascript">
	 	// 创建元素
		var p = "<p>这是一个p标签</p>";
		console.log(p);
		console.log($(p));
		
		/* 添加元素 */
		// 创建元素
		var span = "<span>小奶狗</span>";
		// 得到指定元素，并在元素的内部最前面追加内容
		$(".green").prepend(span);
		var span2 = "<span>小狼狗</span>";
		$(span2).prependTo($(".green"));
		
		var span3 = "<span>小奶狗1</span>";
		var span4 = "<span>小奶狗2</span>";
		$(".green").append(span3);
		$(span4).appendTo($(".green"));
		
		// 将已存在内容追加到指定元素中
		$(".green").append($(".red"));
		
		
		/* 同级追加 */
		var sp1 = "<span class='pink'>女神</span>";
		var sp2 = "<span class='gray'>歌手</span>";
		
		$(".blue").before(sp1);
		$(".blue").after(sp2);
		
	 </script>
</html>
